<template>
    <div ref="echartDom"></div>
</template>

<script setup>
    import {
        ref,
        defineProps,
        onMounted,
        onUnmounted,
        inject,
        shallowRef,
        defineExpose
    } from 'vue'
    import {
        pxToRem
    } from "@/utils/index";


    
    const props = defineProps({
  lineData: {
    type: Object,
    default: () => {
    }
  }
});

    const echartDom = ref(null);
    const myChart = shallowRef(null);
    const echarts = inject('echarts');

    // echarts初始化渲染
let legendStyle = props.lineData.legendStyle//图例
let seriesData = props.lineData.seriesData//serires数据
let xAxisData = props.lineData.xAxisData //x数据

    const initEchart = () => {
        if (echartDom.value) {
          console.log(props?.lineData?.seriesData, '100')
            myChart.value = echarts.init(echartDom.value);
             // 图例配置
      const legendConfig = {
        show: legendStyle.show,
        icon: legendStyle.icon,
        left: pxToRem(legendStyle.left)? pxToRem(legendStyle.left):legendStyle.left,
        right:pxToRem(legendStyle.right),
        top: pxToRem(legendStyle.top),
        bottom: pxToRem(legendStyle.bottom),
        itemWidth: pxToRem(legendStyle.itemWidth),
        itemHeight: pxToRem(legendStyle.itemHeight),
        itemGap: pxToRem(legendStyle.itemGap),
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(12),
          rich:{
            one:{
              width:pxToRem(100),
            },
            two:{
              width:pxToRem(50),
            },
            three:{
              width:pxToRem(50),
            }
          },
          padding: [0, 0, pxToRem(-3), 0],
        },
      };
       // 追加项
       for(let j in legendStyle){
        if(j != 'show' && j != 'icon'  && j != 'left'  && j != 'right' && j != 'top' && j != 'itemWidth'  && j != 'itemHeight'   && j != 'itemGap'  && j != ' textStyle'){
          legendConfig[j] = toRaw(legendStyle[j])
        }
      }
      // series配置
     let seriesConfig = seriesData.map((item,index) => {
          return{
            stack: item.name,
            name: item.name,
            type:'line',
            showSymbol: false,
            smooth: true,
            sampling: 'lttb',
            data:toRaw([[xAxisData[index],item.numericalMap[index],item.yoyMap[index], item.chainMap[index]]]),
            yAxisIndex: index == 0 ? 1 : 0
          }
      })
            let option = {
                barMaxWidth: pxToRem(11),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
        left: '2%',
        right: '2%',
        bottom: '20%',
        top: '20%',
        containLabel: true
      },
      legend: legendConfig,
      xAxis: {
        type: 'category',
        data: props?.lineData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(9),
          color: 'white',
          fontWeight: 'lighter',
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      dataZoom: [
    {
      type: 'slider', // 设置为滑动条类型
      xAxisIndex: 0, // 关联到 x 轴
      start: 0, // 初始化时的开始位置
      end: 100, // 初始化时的结束位置
      height: 20, // 调整组件高度
      bottom: 0, // 设置组件位置在底部
    }
  ],
                yAxis: [
                    
                {
                        
                        position: 'left',
                        name: '均价(万元)',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12),
            padding: [0, 0, 0, pxToRem(-30)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12),
            color: 'white'
          }
                    },{
                        position: 'right',
                        name: '套数',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12),
            padding: [0, 0, 0, pxToRem(20)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12),
            color: 'white',
          }
                      
                    }
                 
                ],
                series: seriesConfig
            };
            option && myChart.value.setOption(option, true);
        }

    }

    const updateChart = () => {
        if (myChart.value) {
            myChart.value.dispose(); // 销毁旧图表实例
        }
        initEchart();
    };

    defineExpose({
        updateChart
    })

    onMounted(() => {
        initEchart();
        window.addEventListener("resize", updateChart);
    })

    onUnmounted(() => {
            window.removeEventListener("resize", updateChart);
        })
        </script>
    <style scoped lang="less">
        .h140 {
            height: 140px;
        }
    </style>